<script setup>
import {ref, computed} from 'vue'
import {useUserStore,useUserInfoStore} from "@/stores/index.js";
import LoginDialog from "@/components/LoginDialog.vue";
import {ElMessageBox} from "element-plus";
import router from "@/router/index.js";
import {Setting, SwitchButton, User} from "@element-plus/icons-vue";
import Switch from "@/components/switch.vue";

const userStore = useUserStore()
const userInfoStore = useUserInfoStore()
//登录
const isLoggedIn = computed(() => !!userStore.token)
const loginDialogRef = ref()
//打开登录页
const openLoginDialog = () => {
  loginDialogRef.value.open()
}
// 退出登录处理
const logout = async () => {
  await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  userStore.removeToken()
  userStore.setUser({})
  userInfoStore.clear()
  isLoggedIn.value = false;
  await router.push('/')
  await router.replace('/')
}

const searchName = ref('')

const search = (search1) => {
  router.push({
    name: 'Search',
    query: {
      searchName: search1
    }
  })
}
</script>

<template>
  <div class="nav">
    <div class="logo">
      <img src="@/assets/img/img_1.png" alt="轻云-小说论坛" class="logo-img"/>
      <!--    <span>轻云-小说论坛</span>-->
    </div>
    <span class="find link"><router-link to="/">发现</router-link></span>
    <span class="publish link"><router-link to="/publish">发布</router-link></span>

    <div class="search">
      <input type="text" class="search__input" placeholder="搜索文章/标签/用户" v-model="searchName" @keyup.enter="search(searchName)" >
      <button class="search__button" @click="search(searchName)">
        <svg class="search__icon" aria-hidden="true" viewBox="0 0 24 24">
          <g>
            <path
              d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
          </g>
        </svg>
      </button>
    </div>
    <span class="privateMgs">
       <router-link to="/message">
      <el-tooltip
        content="私信"
        placement="top"
      >
      <span class="privateMgs">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sixin"></use>
      </svg>
      </span>
      </el-tooltip>
          </router-link>
    </span>
    <span class="notice">
      <router-link to="/notice">
        <el-tooltip
          content="通知"
          placement="top"
        >

    <span class="notice">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tongzhi"></use>
      </svg>
    </span>
  </el-tooltip>
      </router-link>
    </span>
    <div class="individual">
      <el-dropdown
        v-if="isLoggedIn"
        trigger="click"
        @visible-change="(visible) => dropdownVisible = visible"
      >
        <el-avatar
          :size="55"
          :src="userStore.user.avatar"
          class="cursor-pointer"
        />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-icon>
                <User/>
              </el-icon>
              <span><router-link to="/user">个人中心</router-link></span>
            </el-dropdown-item>

            <el-dropdown-item>
              <el-icon>
                <Setting/>
              </el-icon>
              <span><router-link to="/set">账号设置</router-link></span>
            </el-dropdown-item>

            <el-dropdown-item divided @click="logout">
              <el-icon>
                <SwitchButton/>
              </el-icon>
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <span v-else @click="openLoginDialog">
      <el-avatar :size="55">未登录</el-avatar>
    </span>
    </div>

    <div>
      <LoginDialog ref="loginDialogRef"></LoginDialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.nav {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-bottom: 1px solid #ddd;
  height: 60px;
}

.logo {
  position: relative;
  float: left;
  margin-left: 30px;

  img {
    height: 60px;
  }
}

.link {
  display: inline-block;
  width: 50px;
  height: 60px;
  line-height: 60px;
  margin-left: 10px;
  padding-left: 18px;
  outline: none;
  border-radius: 10px;
  font-size: 15px;

}
a {
  text-decoration: none;
  cursor: pointer;
  color: #636363;
}

.icon {
  color: #777676;
  height: 25px;
  width: 25px;
  cursor: pointer;
}

.link:hover {
  background-color: #e6e5e5;
}

.search {
  margin: 0 30px;
  flex: 1;
  max-width: 350px;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
  }

  .search__input {
    font-family: inherit;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.87);
    border: 1px solid #e5e6eb;
    color: #4e5969;
    padding: 0.8rem 1.8rem;
    border-radius: 25px;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    &:hover {
      border-color: #a2bac9;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    &:focus {
      outline: none;
      border-color: #3b789d;
      box-shadow: 0 3px 10px rgba(22, 93, 255, 0.15);
      background-color: rgba(242, 242, 248, 0.7);
    }

    &::-webkit-input-placeholder {
      color: #a9a9a9;
      font-weight: 400;
    }
  }

  .search__button {
    border: none;
    background: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      transform: translateY(-50%) scale(1.08);
    }

    &:active {
      transform: translateY(-50%) scale(0.95);
    }
  }

  .search__icon {
    height: 1.6em;
    width: 1.6em;
    fill: #86909c;
    transition: all 0.3s ease;

    .search__input:focus + & {
      fill: #16c1ff;
    }
  }
}

.privateMgs {
  margin-left: 25px;
}

.notice {
  margin-left: 25px;
}

.individual {
  margin-left: 50px;
  cursor: pointer;
}
</style>
